import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';
import Fluid from '../../examples/Image/Fluid';
import Shape from '../../examples/Image/Shape';

# Images

## Shape

Use the `rounded`, `roundedCircle` and `thumbnail` props to customise
the image.

## Fluid

Use the `fluid` to scale image nicely to the parent element.

## API

<ComponentApi metadata={props.data.Image} />

export const query = graphql`
  query ImageQuery {
    Image: componentMetadata(displayName: { eq: "Image" }) {
      ...ComponentApi_metadata
    }
  }
`;
